<html>

<head>
  <meta charset="utf-8">
  <title>Canvas tutorial</title>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById("tutorial");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        
        function getCoordinate (centerX, centerY, radius, degree) {
          var x = centerX + Math.cos(degree) * radius
          var y = centerY + Math.sin(degree) * radius
          return {
            x: Math.floor(x),
            y: Math.floor(y)
          }
        }

        function getDegree (degree) {
          return Math.PI/180 * degree // 传入角度返回弧度
        }

        function writeGrrenBall () {
          var degree = 22.5
          for (var i = 0; i < 8; i++) {
            ctx.beginPath()
            ctx.fillStyle = '#01BDC8'
            var x = getCoordinate(150, 150, 75, getDegree(degree)).x
            var y = getCoordinate(150, 150, 75, getDegree(degree)).y
            ctx.arc(x, y, 17, 0, Math.PI*2, true)
            ctx.fill()
            ctx.font = "14px sans-serif";
            ctx.fillStyle = 'white'
            ctx.fillText(i + '%', x - 9, y + 5)
            degree += 45
          }
        }

        function writeWhiteWord () {
          var ratateList = [290, 340, 20, 70, 290, 335, 20, 70]
          var degreeList = [35, 80, 125, 170, 190, 235, 280, 325]
          for (var i = 0; i < 8; i++) {
            var x = getCoordinate(150, 150, 120, getDegree(degreeList[i])).x
            var y = getCoordinate(150, 150, 120, getDegree(degreeList[i])).y
            ctx.save();
            ctx.strokeStyle = 'white'
            ctx.font = "14px sans-serif";
            ctx.translate(x, y) // 变换原点
            ctx.rotate(getDegree(ratateList[i]))
            ctx.beginPath()
            ctx.fillText(i + '压力承受', 0 - 6, 0 + 6)
            ctx.restore();
          }
        }

        function writeBig() {
          var begin = 0
          var range = 45
          var angle1 = 0
          var angle2 = getDegree(45)
          var opa = 0.8
          for (var i = 0; i < 8; i++) {
            ctx.fillStyle = 'rgba(87, 117, 142, ' + opa + ')'
            ctx.strokeStyle = '#e1e1e1' 
            ctx.beginPath()
            ctx.moveTo(150, 150)
            ctx.arc(150, 150, 140, angle1, angle2)
            ctx.lineTo(150, 150)
            ctx.stroke()
            ctx.fill()
            angle1 = angle2
            begin += 45
            angle2 = getDegree(begin + range)
            i <= 2 ? opa += 0.1 : opa -= 0.1
          }
        }

        function writeSmall () {
          var begin = 0
          var range = 45
          var angle1 = 0
          var angle2 = getDegree(45)
          for (var i = 0; i < 8; i++) {
            ctx.fillStyle = 'white'
            ctx.beginPath()
            ctx.moveTo(150, 150)
            ctx.arc(150, 150, 100, angle1, angle2)
            ctx.lineTo(150, 150)
            ctx.stroke()
            ctx.fill()
            angle1 = angle2
            begin += 45
            angle2 = getDegree(begin + range)
          }
        }

        writeBig()
        writeSmall()
        writeGrrenBall()
        writeWhiteWord()

      }
    }
  </script>
  <style>
  </style>
</head>

<body onload="draw();">
  <img src="./images/canvas.png" alt="">
  <canvas id="tutorial" width="300" height="300"></canvas>
</body>

</html>